<template>
  <div class="calendar" @click="navToDetail">
    <section-title title="老黄历" />
    <div class="wrap">
      <div class="content-left">
        <div class="day">{{day}}</div>
        <div class="date">{{date}}</div>
      </div>
      <div class="content-right">
        <p class="info date-gz">{{getYearGZ()}}年 {{getMonthGZ()}}月 {{getDateGZ()}}日</p>
        <p class="info do-something">
          <span class="item">宜:</span>
          <span
            class="item"
            v-for="(v,i) in good"
            :key="i"
          >{{v}}</span>
        </p>
        <p class="info do-something">
          <span class="item">忌:</span>
          <span
            class="item"
            v-for="(v,i) in bad"
            :key="i"
          >{{v}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { SectionTitle } from '@/components'
import { getYearGZ, getMonthGZ, getDateGZ } from '@/tools'

const { mapState, mapActions } = createNamespacedHelpers('Home')
export default {
  name: 'calendar',
  components: { SectionTitle },
  computed: {
    ...mapState({
      good: state => (state.calendar.good ? state.calendar.good.slice(0, 3) : []),
      bad: state => (state.calendar.bad ? state.calendar.bad.slice(0, 3) : []),
      loading: state => state.calendarLoading
    })
  },
  data: () => ({
    day: '',
    date: ''
  }),
  methods: {
    ...mapActions(['getCalendar']),
    getYearGZ,
    getMonthGZ,
    getDateGZ,
    getDate() {
      const t = new Date()
      const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.day = week[t.getDay()]
      this.date = t.getDate()
    },
    navToDetail() {
      this.$router.push({ name: 'calendar-detail' })
    }
  },
  mounted() {
    this.getDate()
    this.getCalendar()
  }
}
</script>

<style lang="stylus">
.calendar {
  .wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .content-left {
      margin-right: 1em;
      padding: 10px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 1px 2px 8px #aaa;
    }

    .day {
      font-size: 80%;
      margin-bottom: 10px;
    }

    .date {
      width: 1.25em;
      font-size: 300%;
    }

    .content-right {
      width: 60%;
    }

    .date-gz {
      font-size: 18px;
    }

    .do-something {
      margin-top: 10px;
      font-size: 16px;
      color: $font-gray;
      line-height: 1.25;

      .item {
        display: inline-block;
        margin-right: 0.5em;
      }
    }
  }
}
</style>
